<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>设置备注和标签</template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->


        <!-- 备注 -->
        <div class="panel-wrap">
            <p class="title-box">备注</p>
            <van-field v-model="params.note" placeholder="请输入备注" />
        </div>

        <!-- 标签 -->
        <div class="panel-wrap wrapper">
            <p class="title-box">标签</p>
            <van-cell title="添加标签" is-link/>
        </div>

        <!-- 描述 -->
        <div class="panel-wrap wrapper">
            <p class="title-box">描述</p>
            <van-field v-model="params.note" placeholder="请输入描述" />
        </div>

        <!-- 发送按钮 -->
        <div class="btn-wrap">
            <div class="btn">保存</div>
         </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const params =reactive({
    note: ''
})
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;
    .panel-wrap {
        background-color: #fff;
        padding: 60px 5px 0 5px;
        .title-box {
            font-size: 16px;
            border-bottom: 1px solid #f2f1f1;
            padding-bottom: 10px;
        }
    }
    .wrapper {
        padding: 10px 5px 0 5px; 
    }

    .btn-wrap {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        .btn {
            width: 60%;
            padding: 15px 0;
            background-color: #27BA9B;
            color: #fff;
            font-size: 20px;
            border-radius: 8px;
            text-align: center;
        }
    }
}
</style>